
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    
        <link rel="icon" href="/favicon.ico">
    
    
        
            <link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
        
            <link rel="stylesheet" href="/css/stage.css">
        
            <link rel="stylesheet" href="/css/avatar-bg.css">
        
    
<meta name="generator" content="Hexo 4.2.0"></head>

<body>
<header id="header">
    <div class="menu">
        <i class="fa fa-bars"></i>
    </div>
    <div class="header-main">
        <h1><a href="/">home</a></h1>
    </div>
    <div id="nav">
        <div class="nav-img" id="nav-img"></div>
        <div class="sentences">
            路遥知马力，日久见人心。——《元曲选·争报恩》
        </div>
    </div>
</header>

<div id="content-outer">
    <div id="content-inner">
        <div class="clearfix">
    
    <div id="recent-posts">
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/05/03/又拍云存储/">
                        又拍云存储
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-05-03T11:18:35.000Z">
                            2020-05-03
                        </time>
                    
                    
                </div>
                
                    <h1 id="又拍云存储"><a href="#又拍云存储" class="headerlink" title="又拍云存储"></a>又拍云存储</h1><hr>
<h2 id="安装又拍云的控件"><a href="#安装又拍云的控件" class="headerlink" title="安装又拍云的控件"></a>安装又拍云的控件</h2><p>pip install upyun</p>
<hr>
<h2 id="django接口"><a href="#django接口" class="headerlink" title="django接口"></a>django接口</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#又拍云</span></span><br><span class="line"><span class="keyword">import</span> upyun</span><br><span class="line"><span class="comment">#定义文件上传类</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">YouPai</span><span class="params">(View)</span>:</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">post</span><span class="params">(self,request)</span>:</span></span><br><span class="line">        <span class="comment">#接受参数</span></span><br><span class="line">        img = request.FILES.get(<span class="string">'file'</span>)</span><br><span class="line">        <span class="comment"># 生成独特的文件名</span></span><br><span class="line">        filename = make_password(img.name) + str((int(round(time.time() * <span class="number">1000</span>)))) + <span class="string">".jpg"</span></span><br><span class="line">        <span class="comment"># 实例化对象</span></span><br><span class="line">        up = upyun.UpYun(<span class="string">'md-admin'</span>, username=<span class="string">'a2925087209'</span>, password=<span class="string">'by0sFyYQ62GfZSIqCPVRXJLHlierRJsT'</span>)</span><br><span class="line">        headers = &#123; <span class="string">'x-gmkerl-rotate'</span>: <span class="string">'50'</span> &#125;</span><br><span class="line">        <span class="comment"># 分块上传</span></span><br><span class="line">        <span class="keyword">for</span> chunk <span class="keyword">in</span> img.chunks():</span><br><span class="line">            res = up.put(<span class="string">'/%s'</span>%filename,chunk,checksum=<span class="literal">True</span>,headers=headers)</span><br><span class="line">        <span class="comment">#返回结果</span></span><br><span class="line">        <span class="keyword">return</span> HttpResponse(json.dumps(&#123;<span class="string">'filename'</span>:filename&#125;),content_type=<span class="string">'application/json'</span>)</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="vue接口"><a href="#vue接口" class="headerlink" title="vue接口"></a>vue接口</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;!-- &lt;&#x2F;img :src&#x3D;&quot;src&quot; &#x2F;&gt; --&gt;</span><br><span class="line">        又拍云存储：&lt;Avatar :src&#x3D;&quot;yp_url&quot; :width&#x3D;&#39;150&#39; fil&#x3D;&#39;fill&#39;&gt;&lt;&#x2F;Avatar&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;input type&#x3D;&quot;file&quot; @change&#x3D;&quot;upload_upyun&quot; &#x2F;&gt;</span><br><span class="line">        &lt;div class&#x3D;&quot;upload&quot;&gt;</span><br><span class="line">            拖拽上传</span><br><span class="line">        &lt;&#x2F;div&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            yp_url :&#39;&#39;,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    mounted:function()&#123;</span><br><span class="line">    &#x2F;&#x2F;又拍云</span><br><span class="line">    &#x2F;&#x2F;注册推托拽容器</span><br><span class="line">    let upload &#x3D; document.querySelector(&#39;.upyun&#39;);</span><br><span class="line">    &#x2F;&#x2F;声明监听事件</span><br><span class="line">    &#x2F;&#x2F;点击</span><br><span class="line">    upload.addEventListener(&#39;dragenter&#39;, this.onDrag, false);</span><br><span class="line">    &#x2F;&#x2F;悬停</span><br><span class="line">    upload.addEventListener(&#39;dragover&#39;, this.onDrag, false);</span><br><span class="line">    &#x2F;&#x2F;释放</span><br><span class="line">    upload.addEventListener(&#39;drop&#39;, this.onDrop, false);</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        &#x2F;&#x2F;又拍云上传</span><br><span class="line">        &#x2F;&#x2F;监听鼠标</span><br><span class="line">        onDrag (e) &#123;</span><br><span class="line">        e.stopPropagation();</span><br><span class="line">        e.preventDefault();</span><br><span class="line">        &#125;,</span><br><span class="line">        onDrop (e) &#123;</span><br><span class="line">        e.stopPropagation();</span><br><span class="line">        e.preventDefault();</span><br><span class="line">        this.upyun(e.dataTransfer.files);</span><br><span class="line">        &#125;,</span><br><span class="line">        &#x2F;&#x2F;上传又拍云</span><br><span class="line">        upyun:function(files)&#123;</span><br><span class="line">            &#x2F;&#x2F;获取文件对象</span><br><span class="line">        &#x2F;&#x2F;   let file &#x3D; e.target.files[0];</span><br><span class="line">            let file &#x3D; files[0];</span><br><span class="line">            &#x2F;&#x2F;声明参数</span><br><span class="line">            let param &#x3D; new FormData();</span><br><span class="line">            param.append(&#39;file&#39;,file);</span><br><span class="line"></span><br><span class="line">            const config &#x3D; &#123;</span><br><span class="line">            headers: &#123; &#39;Content-Type&#39;: &#39;multipart&#x2F;form-data&#39; &#125;</span><br><span class="line">            &#125; </span><br><span class="line">            var a &#x3D; this</span><br><span class="line">            a.axios.post(&#39;http:&#x2F;&#x2F;localhost:8000&#x2F;youpai&#x2F;&#39;, param, config)&#x2F;&#x2F; 上传图片</span><br><span class="line">            .then(function(res) &#123;</span><br><span class="line">                console.log(res)	</span><br><span class="line">                a.yp_url &#x3D; &#39;http:&#x2F;&#x2F;md-admin.test.upcdn.net&#x2F;&#39;+res.data.filename</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line">    &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">.upload &#123;</span><br><span class="line">  margin: 100px auto;</span><br><span class="line">  width: 300px;</span><br><span class="line">  height: 150px;</span><br><span class="line">  border: 2px dashed #f00;</span><br><span class="line">  padding-top: 50px;</span><br><span class="line">  padding-left: 80px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="又拍云文件操作"><a href="#又拍云文件操作" class="headerlink" title="又拍云文件操作"></a>又拍云文件操作</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> upyun</span><br><span class="line"><span class="comment">#实例化</span></span><br><span class="line">up = upyun.UpYun(<span class="string">"空间名"</span>,<span class="string">'操作员'</span>,<span class="string">'密码'</span>)</span><br><span class="line"><span class="comment">#读内存上传</span></span><br><span class="line">up.put(<span class="string">'自定义文件名'</span>,<span class="string">'文件内容'</span>)</span><br><span class="line"><span class="comment">#文件流操作（节省内存）</span></span><br><span class="line"><span class="keyword">with</span> open(<span class="string">'文件路径/文件名'</span>,<span class="string">'rb'</span>)<span class="keyword">as</span> f:</span><br><span class="line">    res = up.put(<span class="string">'自定义文件名'</span>,f,checksum=<span class="literal">True</span>)</span><br><span class="line"><span class="comment">#目录操作</span></span><br><span class="line">up.mkdir(<span class="string">'/文件夹名/'</span>)</span><br><span class="line"><span class="comment">#移动文件</span></span><br><span class="line">up.move(<span class="string">'/文件路径/文件名'</span>,<span class="string">'/新文件路径/文件名'</span>)</span><br><span class="line"><span class="comment">#复制文件</span></span><br><span class="line">up.copy(<span class="string">'/文件路径/文件名'</span>,<span class="string">'/新文件路径/文件名'</span>)</span><br><span class="line"><span class="comment">#断点续传</span></span><br><span class="line"><span class="keyword">with</span> open(<span class="string">'文件路径/文件名'</span>,<span class="string">'rb'</span>)<span class="keyword">as</span> f:</span><br><span class="line">    res = up.put(<span class="string">'自定义文件名'</span>,f,checksum=<span class="literal">True</span>，need_resume=<span class="literal">True</span>)</span><br><span class="line"><span class="comment">#下载</span></span><br><span class="line">res = up.get(<span class="string">'/文件路径/文件名'</span>)</span><br><span class="line"><span class="comment">#删除</span></span><br><span class="line">up.delete(<span class="string">'/文件路径/文件名'</span>)</span><br></pre></td></tr></table></figure>
                
                <div class="readmore">
                    <a href="/hexo_blog/2020/05/03/又拍云存储/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/05/02/画中画/">
                        画中画
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-05-02T02:11:35.000Z">
                            2020-05-02
                        </time>
                    
                    
                </div>
                
                    <h1 id="画中画"><a href="#画中画" class="headerlink" title="画中画"></a>画中画</h1><hr>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        视频：&lt;video id&#x3D;&#39;video&#39; :src&#x3D;&quot;img_url&quot; width&#x3D;&quot;350&quot; height&#x3D;&quot;240&quot;&gt;&lt;&#x2F;video&gt;</span><br><span class="line">        &lt;Button @click&#x3D;&quot;into&quot;&gt;&#123;&#123; this.hzh&#125;&#125;&lt;&#x2F;Button&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            &#x2F;&#x2F;画中画</span><br><span class="line">            hzh : &#39;进入画中画&#39;,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        &#x2F;&#x2F;画中画</span><br><span class="line">        into:function()&#123;</span><br><span class="line">            if(video !&#x3D; document.pictureInPictureElement)&#123;</span><br><span class="line">                &#x2F;&#x2F;尝试进入画中画</span><br><span class="line">                video.requestPictureInPicture();</span><br><span class="line">                this.hzh &#x3D; &#39;退出画中画&#39;</span><br><span class="line">            &#125;else&#123;</span><br><span class="line">                &#x2F;&#x2F;退出画中画</span><br><span class="line">                document.exitPictureInPicture();</span><br><span class="line">                this.hzh &#x3D; &#39;进入画中画&#39;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;，</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/05/02/画中画/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/30/七牛云上传/">
                        七牛云存储
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-30T02:26:35.000Z">
                            2020-04-30
                        </time>
                    
                    
                </div>
                
                    <h1 id="七牛云存储"><a href="#七牛云存储" class="headerlink" title="七牛云存储"></a>七牛云存储</h1><h2 id="安装七牛云控件"><a href="#安装七牛云控件" class="headerlink" title="安装七牛云控件"></a>安装七牛云控件</h2><p>pip install qiniu</p>
<h2 id="django接口获取token"><a href="#django接口获取token" class="headerlink" title="django接口获取token"></a>django接口获取token</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">#七牛云</span></span><br><span class="line"><span class="keyword">from</span> qiniu <span class="keyword">import</span> Auth</span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Qiniu</span><span class="params">(APIView)</span>:</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">get</span><span class="params">(self,request)</span>:</span></span><br><span class="line">        <span class="comment">#声明认证对象 参数（ak,sk）</span></span><br><span class="line">        q = Auth(<span class="string">'lSHiV0YqwAZwm-benIiATiafSQ4-y63Zg1TLmXg3'</span>,<span class="string">'KFZy2dDBwOEHIU2Qmb1v6Kx4C2zvILxkMNDpI057'</span>)</span><br><span class="line">        <span class="comment">#获取token</span></span><br><span class="line">        token = q.upload_token(<span class="string">'md-admin'</span>)</span><br><span class="line">        <span class="keyword">return</span> Response(&#123;<span class="string">'code'</span>:<span class="number">200</span>,<span class="string">'token'</span>:token&#125;)</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="vue接口请求图片上传"><a href="#vue接口请求图片上传" class="headerlink" title="vue接口请求图片上传"></a>vue接口请求图片上传</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;table&gt;</span><br><span class="line">        &lt;tr&gt;</span><br><span class="line">            &lt;td&gt;</span><br><span class="line">                七牛用户头像：</span><br><span class="line">            &lt;&#x2F;td&gt;</span><br><span class="line">            &lt;td&gt;</span><br><span class="line">                &lt;input type&#x3D;&quot;file&quot; @change&#x3D;&quot;qiniu&quot;&gt;</span><br><span class="line">            &lt;&#x2F;td&gt;</span><br><span class="line">        &lt;&#x2F;tr&gt;</span><br><span class="line">    &lt;&#x2F;table&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    data () &#123;</span><br><span class="line">        return &#123;</span><br><span class="line">            msg: &quot;这是一个变量&quot;,</span><br><span class="line">            src:&#39;&#39;,</span><br><span class="line">            &#x2F;&#x2F;七牛</span><br><span class="line">            token:&#39;&#39;,</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;,</span><br><span class="line">    &#x2F;&#x2F;钩子函数</span><br><span class="line">    mounted:function()&#123;</span><br><span class="line">        &#x2F;&#x2F;获取token</span><br><span class="line">        this.get_token();</span><br><span class="line">        &#125;,</span><br><span class="line">    methods:&#123;</span><br><span class="line">        get_token:function()&#123;</span><br><span class="line">            this.axios.get(&#39;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;qiniu&#x2F;&#39;).then(res&#x3D;&gt;&#123;           </span><br><span class="line">                    console.log(res)</span><br><span class="line">                    this.token &#x3D; res.data.token</span><br><span class="line">                    console.log(this.token)</span><br><span class="line">            &#125;)</span><br><span class="line">        &#125;,</span><br><span class="line">        &#x2F;&#x2F;七牛上传</span><br><span class="line">        qiniu:function(e)&#123;</span><br><span class="line">            &#x2F;&#x2F;获取文件</span><br><span class="line">            let file &#x3D; e.target.files[0];</span><br><span class="line">            &#x2F;&#x2F;声明表单</span><br><span class="line">            let param &#x3D; new FormData()    </span><br><span class="line">            param.append(&#39;file&#39;,file,file.name)</span><br><span class="line">            param.append(&#39;token&#39;,this.token)   </span><br><span class="line">            &#x2F;&#x2F;自定义zxios</span><br><span class="line">            const axios_qiniu &#x3D; this.axios.create(&#123;withCredentials:false&#125;)</span><br><span class="line"></span><br><span class="line">            &#x2F;&#x2F;发送请求</span><br><span class="line">            axios_qiniu(&#123;</span><br><span class="line">                method:&#39;POST&#39;,</span><br><span class="line">                url:&#39;http:&#x2F;&#x2F;up-z1.qiniu.com&#39;,</span><br><span class="line">                data:param,</span><br><span class="line">                timeout:30000</span><br><span class="line">            &#125;).then(res&#x3D;&gt;&#123;</span><br><span class="line">                console.log(res)</span><br><span class="line">            &#125;)</span><br><span class="line"></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/30/七牛云上传/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/28/第三方登陆/">
                        第三方登陆
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-28T09:07:35.000Z">
                            2020-04-28
                        </time>
                    
                    
                </div>
                
                    <h1 id="第三方登录"><a href="#第三方登录" class="headerlink" title="第三方登录"></a>第三方登录</h1><hr>
<h2 id="思维引导图"><a href="#思维引导图" class="headerlink" title="思维引导图"></a>思维引导图</h2><p><img src="/bike/wen_img/18.png" alt="aa"></p>
<hr>
<h2 id="微博登录范例"><a href="#微博登录范例" class="headerlink" title="微博登录范例"></a>微博登录范例</h2><h3 id="vue登陆页面请求微博登陆接口"><a href="#vue登陆页面请求微博登陆接口" class="headerlink" title="vue登陆页面请求微博登陆接口"></a>vue登陆页面请求微博登陆接口</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;button @click&#x3D;&#39;sina&#39;&gt;微博登陆&lt;&#x2F;button&gt;</span><br><span class="line">    &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">    methods:&#123;</span><br><span class="line">        sina:function() &#123; </span><br><span class="line">            &#x2F;&#x2F;跳转 </span><br><span class="line">            &#x2F;&#x2F;微博api：https:&#x2F;&#x2F;api.weibo.com&#x2F;oauth2&#x2F;authorize</span><br><span class="line">            &#x2F;&#x2F;client_id：微博开放平台的appid</span><br><span class="line">            &#x2F;&#x2F;redirect_uri：返回的跳转地址</span><br><span class="line">            window.location.href &#x3D; &quot;https:&#x2F;&#x2F;api.weibo.com&#x2F;oauth2&#x2F;authorize?client_id&#x3D;873314913&amp;redirect_uri&#x3D;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;md_admin&#x2F;weibo&quot;;</span><br><span class="line">            &#125;,</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<h3 id="django路由"><a href="#django路由" class="headerlink" title="django路由"></a>django路由</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> myapp.md_user <span class="keyword">import</span> wb_back</span><br><span class="line">urlpatterns = [</span><br><span class="line">    path(<span class="string">'md_admin/weibo/'</span>,wb_back),</span><br><span class="line">]</span><br></pre></td></tr></table></figure>
<h3 id="django接口"><a href="#django接口" class="headerlink" title="django接口"></a>django接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">wb_back</span><span class="params">(request)</span>:</span></span><br><span class="line">    <span class="comment">#接收参数</span></span><br><span class="line">    code = request.GET.get(<span class="string">'code'</span>,<span class="literal">None</span>)</span><br><span class="line">    <span class="comment">#定义token接口地址</span></span><br><span class="line">    url = <span class="string">'https://api.weibo.com/oauth2/access_token'</span></span><br><span class="line">    <span class="comment">#定义参数</span></span><br><span class="line">    re = requests.post(url,data=&#123;</span><br><span class="line">        <span class="string">"client_id"</span>:<span class="string">"873314913"</span>,</span><br><span class="line">        <span class="string">"client_secret"</span>:<span class="string">"01f43512a74bfde158d5b8027726a50a"</span>,</span><br><span class="line">        <span class="string">"grant_type"</span>:<span class="string">"authorization_code"</span>,</span><br><span class="line">        <span class="string">"code"</span>:code,</span><br><span class="line">        <span class="string">"redirect_uri"</span>:<span class="string">"http://127.0.0.1:8000/md_admin/weibo"</span></span><br><span class="line">    &#125;)</span><br><span class="line">    <span class="comment">#换取微薄昵称</span></span><br><span class="line">    res = requests.get(<span class="string">'https://api.weibo.com/2/users/show.json'</span>,params=&#123;<span class="string">'access_token'</span>:re.json()[<span class="string">'access_token'</span>],<span class="string">'uid'</span>:re.json()[<span class="string">'uid'</span>]&#125;)</span><br><span class="line"></span><br><span class="line">    sina_id = <span class="string">''</span></span><br><span class="line">    user_id = <span class="string">''</span></span><br><span class="line">    <span class="comment">#判断是否登陆过</span></span><br><span class="line">    user = User.objects.filter(username=str(res.json()[<span class="string">'name'</span>])).first()</span><br><span class="line">    <span class="keyword">if</span> user:</span><br><span class="line">        <span class="comment">#登陆过就取出id和username</span></span><br><span class="line">        sina_id = user.username</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        <span class="comment">#没登陆过就将微博名写成username把微博id写成md5加密的密码存入数据库</span></span><br><span class="line">        user = User(username=str(res.json()[<span class="string">'name'</span>]),password=make_password(str(res.json()[<span class="string">'id'</span>])))</span><br><span class="line">        user.save()</span><br><span class="line">        <span class="comment">#因为微博昵称可能会变而微博id不变，所以用password当作查询条件，取出username和id</span></span><br><span class="line">        user = User.objects.filter(password=make_password(str(res.json()[<span class="string">'id'</span>]))).first()</span><br><span class="line">        sina_id = user.username</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="comment">#将username和id发送至前端</span></span><br><span class="line">    <span class="keyword">return</span> redirect(<span class="string">'http://127.0.0.1:8080?sina_id='</span>+str(sina_id)+<span class="string">"&amp;uid="</span>+str(user_id))</span><br></pre></td></tr></table></figure>
<h3 id="vue第三方登陆的接入"><a href="#vue第三方登陆的接入" class="headerlink" title="vue第三方登陆的接入"></a>vue第三方登陆的接入</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  mounted:function()&#123;</span><br><span class="line">        &#x2F;&#x2F;接受第三方参数</span><br><span class="line">        var sina_id &#x3D; this.$route.query.sina_id;</span><br><span class="line">        var user_id &#x3D; this.$route.query.uid;</span><br><span class="line">        &#x2F;&#x2F;判断是否有第三方登陆</span><br><span class="line">        if(sina_id)&#123;</span><br><span class="line">            &#x2F;&#x2F;存入localStorage</span><br><span class="line">            localStorage.setItem(&#39;username&#39;,sina_id)</span><br><span class="line">            localStorage.setItem(&#39;uid&#39;,user_id)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="钉钉第三方扫码登陆"><a href="#钉钉第三方扫码登陆" class="headerlink" title="钉钉第三方扫码登陆"></a>钉钉第三方扫码登陆</h2><h3 id="vue钉钉扫码接口"><a href="#vue钉钉扫码接口" class="headerlink" title="vue钉钉扫码接口"></a>vue钉钉扫码接口</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F;钉钉登陆</span><br><span class="line">dingding:function() &#123; </span><br><span class="line">    &#x2F;&#x2F;跳转</span><br><span class="line">    &#x2F;&#x2F;appid为钉钉开放平台应用的appid</span><br><span class="line">    &#x2F;&#x2F;redirect_uri为回调地址</span><br><span class="line">    window.location.href &#x3D; &#39;https:&#x2F;&#x2F;oapi.dingtalk.com&#x2F;connect&#x2F;qrconnect?appid&#x3D;dingoagvulsdkmz3tmutfp&amp;response_type&#x3D;code&amp;scope&#x3D;snsapi_login&amp;state&#x3D;STATE&amp;redirect_uri&#x3D;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;md_admin&#x2F;dingding&#39;</span><br><span class="line">    &#125;,</span><br></pre></td></tr></table></figure>
<h3 id="django接口-1"><a href="#django接口-1" class="headerlink" title="django接口"></a>django接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> base64</span><br><span class="line"><span class="keyword">import</span> hmac</span><br><span class="line"><span class="keyword">import</span> urllib</span><br><span class="line"></span><br><span class="line"><span class="comment"># 钉钉回调</span></span><br><span class="line"><span class="function"><span class="keyword">def</span> <span class="title">ding_back</span><span class="params">(request)</span>:</span></span><br><span class="line">    code = request.GET.get(<span class="string">'code'</span>)</span><br><span class="line">    t = time.time()</span><br><span class="line">    <span class="comment"># 时间戳  appSecret为钉钉开放平台应用的appsecret</span></span><br><span class="line">    timestamp = str((int(round(t * <span class="number">1000</span>))))</span><br><span class="line">    appSecret = <span class="string">'Neijy8PB_rEoaSKcUHhwz-ddj44_Y_Zt-xJ_RbiXMIy2VMVl6erF_B6ceXvakq0N'</span></span><br><span class="line">    <span class="comment"># 构造签名</span></span><br><span class="line">    signature = base64.b64encode(</span><br><span class="line">        hmac.new(appSecret.encode(<span class="string">'utf-8'</span>), timestamp.encode(<span class="string">'utf-8'</span>), digestmod=hashlib.sha256).digest())</span><br><span class="line">    <span class="comment"># 请求接口，换取钉钉用户名  accessKey为钉钉开放平台应用的appid</span></span><br><span class="line">    payload = &#123;<span class="string">'tmp_auth_code'</span>: code&#125;</span><br><span class="line">    headers = &#123;<span class="string">'Content-Type'</span>: <span class="string">'application/json'</span>&#125;</span><br><span class="line">    res = requests.post(<span class="string">'https://oapi.dingtalk.com/sns/getuserinfo_bycode?signature='</span> + urllib.parse.quote(signature.decode(<span class="string">"utf-8"</span>)) + <span class="string">"&amp;timestamp="</span> + timestamp + <span class="string">"&amp;accessKey=dingoagvulsdkmz3tmutfp"</span>,data=json.dumps(payload), headers=headers)</span><br><span class="line">    res_dict = json.loads(res.text)</span><br><span class="line"> </span><br><span class="line">    user = User.objects.filter(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>])).first()</span><br><span class="line"></span><br><span class="line">    username = <span class="string">''</span></span><br><span class="line">    user_id = <span class="string">''</span></span><br><span class="line">    <span class="keyword">if</span> user:</span><br><span class="line">        username = res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]</span><br><span class="line">        user_id = user.id</span><br><span class="line">    <span class="keyword">else</span>:</span><br><span class="line">        User.objects.create(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]), password=<span class="string">''</span>)</span><br><span class="line">        user = User.objects.filter(username=str(res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>])).first()</span><br><span class="line">        username = res_dict[<span class="string">'user_info'</span>][<span class="string">'nick'</span>]</span><br><span class="line">        user_id = user.id</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> redirect(<span class="string">'http://localhost:8080/?username='</span> + str(username) + <span class="string">'&amp;'</span> + <span class="string">'user_id='</span> + str(user_id))</span><br></pre></td></tr></table></figure>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/28/第三方登陆/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/26/Vcode/">
                        自定义验证码
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-25T18:59:06.000Z">
                            2020-04-26
                        </time>
                    
                    
                </div>
                
                    <h1 id="自定义验证码"><a href="#自定义验证码" class="headerlink" title="自定义验证码"></a>自定义验证码</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">#自定义图片验证码</span><br><span class="line">class MyCode(View):</span><br><span class="line"></span><br><span class="line">	#定义rgb随机颜色</span><br><span class="line">	def get_random_color(self):</span><br><span class="line"></span><br><span class="line">		R &#x3D; random.randrange(255)</span><br><span class="line">		G &#x3D; random.randrange(255)</span><br><span class="line">		B &#x3D; random.randrange(255)</span><br><span class="line"></span><br><span class="line">		return (R,G,B)</span><br><span class="line"></span><br><span class="line">	#定义图片视图</span><br><span class="line">	def get(self,request):</span><br><span class="line">		#画布</span><br><span class="line">		img_size &#x3D; (120,50)</span><br><span class="line">		#定义图片对象</span><br><span class="line">		image &#x3D; Image.new(&#39;RGB&#39;,img_size,&#39;white&#39;)</span><br><span class="line">		#定义画笔</span><br><span class="line">		draw &#x3D; ImageDraw.Draw(image,&#39;RGB&#39;)</span><br><span class="line">		source &#x3D; &#39;0123456789abcdefghijk&#39;</span><br><span class="line">		#接收容器</span><br><span class="line">		code_str &#x3D; &#39;&#39;</span><br><span class="line">		#进入循环绘制</span><br><span class="line">		for i in range(4):</span><br><span class="line">			#获取字母颜色</span><br><span class="line">			text_color &#x3D; self.get_random_color()</span><br><span class="line">			#获取随机下标</span><br><span class="line">			tmp_num &#x3D; random.randrange(len(source))</span><br><span class="line">			#随机字符串</span><br><span class="line">			random_str &#x3D; source[tmp_num]</span><br><span class="line">			#装入容器</span><br><span class="line">			code_str +&#x3D; random_str</span><br><span class="line">			#绘制字符串</span><br><span class="line">			draw.text((10+30*i,20),random_str,text_color)</span><br><span class="line">		#获取缓存区</span><br><span class="line">		buf &#x3D; io.BytesIO()</span><br><span class="line">		#将临时图片保存到缓冲</span><br><span class="line">		image.save(buf,&#39;png&#39;)</span><br><span class="line">		#保存随机码</span><br><span class="line">		r.set(&#39;code&#39;,code_str)</span><br><span class="line">		#保存session</span><br><span class="line">		request.session[&#39;code&#39;] &#x3D; code_str</span><br><span class="line"></span><br><span class="line">		print(r.get(&#39;code&#39;))</span><br><span class="line"></span><br><span class="line">		return HttpResponse(buf.getvalue(),&#39;image&#x2F;png&#39;)</span><br></pre></td></tr></table></figure>


<p><img src="/hugo_blog/0d8a90abc2d78eaa5e01d3fb7f57e6da.jpg" alt="每日一图"></p>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/26/Vcode/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/25/滑动验证/">
                        滑动验证
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-25T06:30:35.000Z">
                            2020-04-25
                        </time>
                    
                    
                </div>
                
                    <h1 id="滑动验证"><a href="#滑动验证" class="headerlink" title="滑动验证"></a>滑动验证</h1><hr>
<h3 id="1-在template"><a href="#1-在template" class="headerlink" title="1.在template"></a>1.在template</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;drag-verify :width&#x3D;&quot;width&quot;</span><br><span class="line">             :height&#x3D;&quot;height&quot;</span><br><span class="line">             :text&#x3D;&quot;text&quot;</span><br><span class="line">             ref&#x3D;&quot;Verify&quot;&gt;</span><br><span class="line">&lt;&#x2F;drag-verify&gt;</span><br></pre></td></tr></table></figure>
<hr>
<h3 id="2-在script设置属性-npm-install-vue-drag-verify-–save"><a href="#2-在script设置属性-npm-install-vue-drag-verify-–save" class="headerlink" title="2.在script设置属性 (npm install vue-drag-verify –save)"></a>2.在script设置属性 (npm install vue-drag-verify –save)</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;&#x2F; 导包</span><br><span class="line">import dragVerify from &#39;vue-drag-verify&#39;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      &#x2F;&#x2F; 在data里面设置滑动的属性</span><br><span class="line">      width: 320,</span><br><span class="line">      height: 42,</span><br><span class="line">      text: &#39;请将滑块拖到最右侧&#39;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;，</span><br><span class="line">  &#x2F;&#x2F; 注册标签</span><br><span class="line">  components: &#123;</span><br><span class="line">    &#39;dragVerify&#39;: dragVerify</span><br><span class="line">  &#125;,</span><br><span class="line">  &#x2F;&#x2F;检验是否拖动</span><br><span class="line">  methods：&#123;</span><br><span class="line">      &#x2F;&#x2F;滑块是否拖动false为未拖动至最右侧反之为true</span><br><span class="line">			if(this.$refs.Verify.isPassing &#x3D;&#x3D; false)&#123;</span><br><span class="line">				this.$Notice(&#39;请拖动滑块&#39;)</span><br><span class="line">			&#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="selenium破解滑块"><a href="#selenium破解滑块" class="headerlink" title="selenium破解滑块"></a>selenium破解滑块</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">from</span> selenium <span class="keyword">import</span> webdriver</span><br><span class="line"><span class="keyword">from</span> selenium.webdriver <span class="keyword">import</span> ChromeOptions</span><br><span class="line"><span class="keyword">from</span> selenium.webdriver <span class="keyword">import</span> ActionChains</span><br><span class="line"></span><br><span class="line">option = ChromeOptions()  <span class="comment"># 实例化一个ChromeOptions对象</span></span><br><span class="line">option.add_experimental_option(<span class="string">'excludeSwitches'</span>, [<span class="string">'enable-automation'</span>])  <span class="comment"># 以键值对的形式加入参数</span></span><br><span class="line">browser = webdriver.Chrome(options=option)</span><br><span class="line"><span class="comment">#发起请求</span></span><br><span class="line">browser.get(<span class="string">'http://127.0.0.1:8080/login)</span></span><br><span class="line"><span class="string"></span></span><br><span class="line"><span class="string">#定位滑块</span></span><br><span class="line"><span class="string">button = browser.find_element_by_class_name("dv_handler")</span></span><br><span class="line"><span class="string">action = ActionChains(browser)</span></span><br><span class="line"><span class="string">#获取小球长度</span></span><br><span class="line"><span class="string">mybutton = button.size.get('</span>width<span class="string">')</span></span><br><span class="line"><span class="string">#获取滑块轨道总长</span></span><br><span class="line"><span class="string">mytext = browser.find_element_by_class_name('</span>dv_text<span class="string">').size.get('</span>width<span class="string">')</span></span><br><span class="line"><span class="string">#按住拖动</span></span><br><span class="line"><span class="string">action.click_and_hold(button).perform()</span></span><br><span class="line"><span class="string">#拖动位置</span></span><br><span class="line"><span class="string">action.move_by_offset(int(mytext)-int(mybutton),0).perform()</span></span><br></pre></td></tr></table></figure>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/25/滑动验证/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/24/手写一个图片验证码/">
                        手写验证码
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-24T07:36:10.000Z">
                            2020-04-24
                        </time>
                    
                    
                </div>
                
                    <h2 id="手写验证码"><a href="#手写验证码" class="headerlink" title="手写验证码"></a>手写验证码</h2><hr>
<h3 id="django接口"><a href="#django接口" class="headerlink" title="django接口"></a>django接口</h3><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="comment">#绘画库</span></span><br><span class="line"><span class="keyword">from</span> PIL <span class="keyword">import</span> ImageDraw</span><br><span class="line"><span class="comment">#图片库</span></span><br><span class="line"><span class="keyword">from</span> PIL <span class="keyword">import</span> Image</span><br><span class="line"><span class="comment">#文件流</span></span><br><span class="line"><span class="keyword">import</span> io</span><br><span class="line"><span class="comment">#随机库</span></span><br><span class="line"><span class="keyword">import</span> random</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> redis</span><br><span class="line"></span><br><span class="line"><span class="comment">#定义ip和端口</span></span><br><span class="line">host = <span class="string">"localhost"</span></span><br><span class="line">port = <span class="number">6379</span></span><br><span class="line"></span><br><span class="line"><span class="comment">#建立链接</span></span><br><span class="line">r = redis.Redis(host=host,port=port)</span><br><span class="line"></span><br><span class="line"><span class="comment">#自定义验证码</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">MyCode</span><span class="params">(View)</span>:</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">#定义随机颜色</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">get_random_color</span><span class="params">(self)</span>:</span></span><br><span class="line">        R = random.randrange(<span class="number">255</span>)</span><br><span class="line">        G = random.randrange(<span class="number">255</span>)</span><br><span class="line">        B = random.randrange(<span class="number">255</span>)</span><br><span class="line">        <span class="keyword">return</span> (R,G,B)</span><br><span class="line"></span><br><span class="line">    <span class="comment">#定义图片视图</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">get</span><span class="params">(self,request)</span>:</span></span><br><span class="line">        <span class="comment">#画布</span></span><br><span class="line">        img_size = (<span class="number">120</span>,<span class="number">50</span>)</span><br><span class="line">        <span class="comment">#定义图片对象</span></span><br><span class="line">        image = Image.new(<span class="string">'RGB'</span>,img_size,<span class="string">'white'</span>)</span><br><span class="line">        <span class="comment">#定义画笔</span></span><br><span class="line">        draw = ImageDraw.Draw(image,<span class="string">'RGB'</span>)</span><br><span class="line">        source = <span class="string">"0123456789abcdefg"</span></span><br><span class="line">        <span class="comment">#接受容器</span></span><br><span class="line">        code_str = <span class="string">''</span></span><br><span class="line">        <span class="comment">#进入循环绘制</span></span><br><span class="line">        <span class="keyword">for</span> i <span class="keyword">in</span> range(<span class="number">4</span>):</span><br><span class="line">            <span class="comment">#获取字母颜色</span></span><br><span class="line">            text_color = self.get_random_color()</span><br><span class="line">            <span class="comment">#获取随机下表</span></span><br><span class="line">            tmp_num = random.randrange(len(source))</span><br><span class="line">            <span class="comment">#随机字符串</span></span><br><span class="line">            random_str = source[tmp_num]</span><br><span class="line">            <span class="comment">#装入容器</span></span><br><span class="line">            code_str += random_str</span><br><span class="line">            <span class="comment">#绘制字符串</span></span><br><span class="line">            draw.text((<span class="number">10</span>+<span class="number">30</span>*i,<span class="number">20</span>),random_str,text_color)</span><br><span class="line">        </span><br><span class="line">        <span class="comment">#获取缓存区</span></span><br><span class="line">        buf = io.BytesIO()</span><br><span class="line">        <span class="comment">#将图片存入</span></span><br><span class="line">        image.save(buf,<span class="string">'png'</span>)</span><br><span class="line">        <span class="comment">#保存随机码</span></span><br><span class="line">        r.set(<span class="string">'code'</span>,code_str)</span><br><span class="line">        print(r.get(<span class="string">'code'</span>))</span><br><span class="line">        <span class="comment">#存session</span></span><br><span class="line">        request.session[<span class="string">'code'</span>] = code_str</span><br><span class="line"></span><br><span class="line">        <span class="keyword">return</span> HttpResponse(buf.getvalue(),<span class="string">'image/png'</span>)</span><br></pre></td></tr></table></figure>
<h2 id="取验证码对比"><a href="#取验证码对比" class="headerlink" title="取验证码对比"></a>取验证码对比</h2><figure class="highlight python"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Login</span><span class="params">(APIView)</span>:</span></span><br><span class="line">    <span class="function"><span class="keyword">def</span> <span class="title">get</span><span class="params">(self,request)</span>:</span></span><br><span class="line">        <span class="comment">#接收参数</span></span><br><span class="line">        code = request.GET.get(<span class="string">'code'</span>,<span class="literal">None</span>)</span><br><span class="line">        <span class="comment">#redis验证码对比</span></span><br><span class="line">        r_code = r.get(<span class="string">'code'</span>).decode(<span class="string">'utf-8'</span>)</span><br><span class="line">        <span class="keyword">if</span> code != r_code:</span><br><span class="line">            <span class="keyword">return</span> Response(&#123;<span class="string">"code"</span>: <span class="number">403</span>, <span class="string">"message"</span>: <span class="string">"验证码错误"</span>&#125;)</span><br><span class="line">        <span class="comment">#session验证码对比</span></span><br><span class="line">        session_code = request.session.get(<span class="string">'code'</span>,<span class="literal">None</span>)</span><br><span class="line">        <span class="keyword">if</span> code != session_code:</span><br><span class="line">            <span class="keyword">return</span> Response(&#123;<span class="string">"code"</span>: <span class="number">403</span>, <span class="string">"message"</span>: <span class="string">"验证码错误"</span>&#125;)</span><br></pre></td></tr></table></figure>
<hr>
<h2 id="vue展示"><a href="#vue展示" class="headerlink" title="vue展示"></a>vue展示</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    &lt;tr&gt;</span><br><span class="line">        &lt;td&gt;</span><br><span class="line">            验证码：</span><br><span class="line">        &lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;</span><br><span class="line">            &lt;input type&#x3D;&quot;text&quot; v-model&#x3D;&quot;code&quot;  placeholder&#x3D;&quot;请输入验证码&quot;&gt;</span><br><span class="line">        &lt;&#x2F;td&gt;</span><br><span class="line">        &lt;td&gt;</span><br><span class="line">            &lt;img class&#x3D;&quot;imgcode&quot; :src&#x3D;&quot;yzimg&quot; alt&#x3D;&quot;验证码加载失败&quot; @click&#x3D;&quot;yzm()&quot;&gt;</span><br><span class="line">        &lt;&#x2F;td&gt;</span><br><span class="line">    &lt;&#x2F;tr&gt;</span><br><span class="line">  &lt;&#x2F;div&gt;</span><br><span class="line">&lt;&#x2F;template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data () &#123;</span><br><span class="line">      return&#123;</span><br><span class="line">          &#x2F;&#x2F;验证码图片</span><br><span class="line">          yzimg:&#39;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;code&#x2F;&#39;,</span><br><span class="line">          &#x2F;&#x2F;输入验证码</span><br><span class="line">          code:&#39;&#39;,</span><br><span class="line">      &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">       &#x2F;&#x2F;验证码刷新</span><br><span class="line">        yzm()&#123;</span><br><span class="line">            var suiji &#x3D; Math.random()</span><br><span class="line">            this.yzimg &#x3D; &#39;http:&#x2F;&#x2F;127.0.0.1:8000&#x2F;code&#x2F;?code&#x3D;&#39;+suiji</span><br><span class="line">        &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br><span class="line">&lt;&#x2F;script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&#x2F;&#x2F;鼠标放置验证码图片时变手形</span><br><span class="line">.imgcode &#123;</span><br><span class="line">    cursor:pointer;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;style&gt;</span><br></pre></td></tr></table></figure>
                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/24/手写一个图片验证码/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/23/day05/">
                        Postman的基本操作
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-22T18:57:11.000Z">
                            2020-04-23
                        </time>
                    
                    
                </div>
                
                    <h1 id="Postman中文文档——界面布局"><a href="#Postman中文文档——界面布局" class="headerlink" title="Postman中文文档——界面布局"></a>Postman中文文档——界面布局</h1><blockquote>
<p>Postman提供了一个多窗口和多标签界面让您处理API。Postman努力保持清洁灵活的需求。它为您提供尽可能多的空间用于您的API。导航界面很简单。看下面的图表，看看一切是如何组织起来的。</p>
</blockquote>
<h3 id="侧边栏（Sidebar）"><a href="#侧边栏（Sidebar）" class="headerlink" title="侧边栏（Sidebar）"></a>侧边栏（Sidebar）</h3><blockquote>
<p>Postman侧边栏可让您查找和管理请求和集合。侧边栏分为两个主要标签——历史（History）和集合（collections）。</p>
</blockquote>
<blockquote>
<p>拖动右边缘可以调整侧边栏的宽度。侧边栏在较小的屏幕也可以进行收起。<br><img src="/hugo_blog/58460797.png" alt=""></p>
</blockquote>
<h3 id="历史记录标签"><a href="#历史记录标签" class="headerlink" title="历史记录标签"></a>历史记录标签</h3><blockquote>
<p>您在Postman应用程序中发送的每个请求都保存在侧栏中的历史记录（History）选项卡中。了解更多关于利用历史记录的作用。</p>
</blockquote>
<h3 id="集合标签"><a href="#集合标签" class="headerlink" title="集合标签"></a>集合标签</h3><blockquote>
<p>从侧边栏的集合（collections）选项卡创建和管理集合。了解有关集合的更多信息，以及如何帮助您将API转化为速度。</p>
</blockquote>
<h3 id="标题工具栏"><a href="#标题工具栏" class="headerlink" title="标题工具栏"></a>标题工具栏</h3><p><img src="/hugo_blog/58462646.png" alt=""></p>
<p>Postman最顶层的工具栏包含以下选项：</p>
<ul>
<li>侧栏切换图标 - 显示或隐藏侧边栏</li>
<li>运行（Runner）按钮 —— 打开集合运行窗口</li>
<li>导入（Import）按钮 ——通过用文件，链接或原始文本将Postman集合，环境，WADL，Swagger，RAML或* cURL导入到Postman</li>
<li>新窗口图标 —— 打开一个新的Postman窗口</li>
<li>Builder和Team Library选项卡 —— 在请求构建器和团队库视图之间切换</li>
<li>拦截器/代理图标 —— 管理代理或拦截器设置</li>
<li>同步状态图标 ——查看并更新您的Postman帐户的状态</li>
<li>用户下拉列表 —— 管理集合链接和您的个人资料，或登录或退出您的Postman帐户</li>
<li>通知图标 —— 接收通知或广播</li>
<li>设置图标 - 管理Postman应用设置并查找其他支持资源</li>
<li>爱心图标 - 爱Postman？点击这个按钮来分享爱！</li>
</ul>
<h3 id="构建器（Builder）"><a href="#构建器（Builder）" class="headerlink" title="构建器（Builder）"></a>构建器（Builder）</h3><blockquote>
<p>Postman为您提供了一个标签式布局，用于在构建器中发送和管理API请求。上半部分是请求构建器，下半部分是响应查看器。</p>
</blockquote>
<ul>
<li>Cookies —— 管理COOKIES窗口在保存（Save）按钮的最右侧的Cookies文本链接点击即可打开。此功能可让您管理与请求相关联的Cookie。进一步了解如何使用Cookie。</li>
<li>代码（code） —— GENERATE CODE SNIPPETS窗口由保存（Save）按钮下方最右侧的代码（code）链接访问。此功能可让您生成超过20种语言与请求相关联的代码片段。</li>
</ul>
<h3 id="控制台"><a href="#控制台" class="headerlink" title="控制台"></a>控制台</h3><p>Postman有两个控制台,要看看幕后是怎么回事。了解更多关于使用控制台日志故障排除。</p>
<ul>
<li>Postman控制台 - 包含HTTP请求和响应的正在运行的日志。记录从脚本发出的消息（如在console.log中）。此功能仅适用于Postman的本地应用程序。</li>
<li>DevTools控制台 - 您可以在开发过程中记录诊断信息。</li>
</ul>
<h3 id="菜单栏"><a href="#菜单栏" class="headerlink" title="菜单栏"></a>菜单栏</h3><blockquote>
<p>Postman应用程序菜单栏提供访问附加功能。请注意，Postman的原生应用的菜单栏和Postman的Chrome应用程序之间有一些关键的区别。</p>
</blockquote>
<blockquote>
<p>Postman本地应用程序：显示更多的菜单选项，使其更容易访问特定的Postman功能。<br><img src="/hugo_blog/52908-363de5518b04cf22.webp" alt=""></p>
</blockquote>
<blockquote>
<p>Postman Chrome应用：显示受Chrome标准限制的几个菜单选项。<br><img src="/hugo_blog/52908-8fe729d77e56d9bf.webp" alt=""></p>
</blockquote>
<h3 id="标签和窗口"><a href="#标签和窗口" class="headerlink" title="标签和窗口"></a>标签和窗口</h3><blockquote>
<p>Postman可以使用多标签和多窗口配置。这允许您同时处理多个请求，甚至多个集合。</p>
</blockquote>
<blockquote>
<p>要在Postman中打开一个新的标签页，请按构建器中的+图标，或使用CMD / CTRL + T快捷键。从菜单栏，您还可以从文件（File）菜单中选择新建选项卡（New Tab）来创建一个新的选项卡。</p>
</blockquote>
<blockquote>
<p>通过右键单击选项卡名称，该菜单允许您复制或关闭选项卡。如果任何标签有未保存的更改，并且您尝试关闭选项卡，Postman将提示您保存更改。</p>
</blockquote>
<h4 id="标签和侧边栏行为"><a href="#标签和侧边栏行为" class="headerlink" title="标签和侧边栏行为"></a>标签和侧边栏行为</h4><blockquote>
<p>默认情况下，Postman假设您想在一个选项卡中处理一个集合请求。当您从侧边栏打开请求时，如果现有选项卡具有未保存的更改，则Postman会打开一个新选项卡，否则该请求将接管当前选项卡。您可以随时在新选项卡中打开请求。从集合（collections）选项卡下的侧边栏中 ，右键单击请求，然后选择“在新选项卡中打开（Open in New Tab）”。</p>
</blockquote>
<h4 id="移动请求"><a href="#移动请求" class="headerlink" title="移动请求"></a>移动请求</h4><blockquote>
<p>在请求构建器中，拖放选项卡以按照您的需要重新排序。在新标签页或新Postman窗口中打开新请求。使 标题工具栏中的新建窗口（New Window）图标或键盘快捷键打开多个窗口。</p>
</blockquote>
<h3 id="键盘快捷键"><a href="#键盘快捷键" class="headerlink" title="键盘快捷键"></a>键盘快捷键</h3><blockquote>
<p>任何开发工具的优先级列表中的键盘可用性都很高。对于大多数开发人员来说，这是一种更有效的输入法，与鼠标或其设备相比，只需要最小的移动和精力。它也节省了时间，对于重复或频繁性的任务，长期来看可以大大提高速度。</p>
</blockquote>
<blockquote>
<p>当我们接触Postman中分配键盘快捷键时，我们根据其功能将它们广泛地分为三个类别：导航，操作和全局。导航快捷键可帮助您移动界面，操作快捷键可让您操纵当前选择，并可从任何地方访问全局快捷键。</p>
</blockquote>
<h3 id="导航快捷键"><a href="#导航快捷键" class="headerlink" title="导航快捷键"></a>导航快捷键</h3><blockquote>
<p>我们希望让用户更轻松地在元素之间快速浏览。我们来看一个打开和发送一系列保存的请求的简单例子。没有快捷键的话，用户在侧边栏中选择一个请求将会每次使用它们的指针在一个选项卡中打开它。使用CMD / CTRL + ALT + 1 快捷键，您现在可以将侧边栏从您所在的任何位置进行聚焦。然后，您可以使用箭头键导航到所需的请求。将其与CMD / CTRL + Enter组合可以在几秒钟内发送一些请求。</p>
</blockquote>
<h3 id="操作快捷键"><a href="#操作快捷键" class="headerlink" title="操作快捷键"></a>操作快捷键</h3><blockquote>
<p>操作快捷键允许您快速处理当前的选择，并执行编辑，删除和复制等操作。结合导航快捷键，这使得您的侧栏中创建和组织集合变得轻而易举。这些快捷键也可以用在其他列表视图中，例如我们的新数据编辑器。</p>
</blockquote>
<h3 id="全局快捷键"><a href="#全局快捷键" class="headerlink" title="全局快捷键"></a>全局快捷键</h3><blockquote>
<p>全局快捷键用于重要的操作，以便可以访问它们，而不考虑关注的元素。所有选项卡上的操作，如保存（CMD / CTRL + S），另存为（CMD / CTRL + Shift + S）和发送请求（CMD / CTRL + Enter）都遵循此模式。还可以使用全局快捷键来执行UI操作，例如切换侧边栏（CMD / CTRL +），跳转到URL（CMD / CTRL + L）和打开控制台（CMD / CTRL + ALT + C）。</p>
</blockquote>
<h3 id="查看操作系统的键盘快捷键"><a href="#查看操作系统的键盘快捷键" class="headerlink" title="查看操作系统的键盘快捷键"></a>查看操作系统的键盘快捷键</h3><blockquote>
<p>不同的操作系统将具有不同的快捷键。您可以随时在SETTINGS窗口的快捷键（Shortcuts）选项卡下查看操作系统快捷方式的完整列表。</p>
</blockquote>
<p><img src="/hugo_blog/52908-6654b9825f513d99.webp" alt=""></p>
<h4 id="所有快捷键参考"><a href="#所有快捷键参考" class="headerlink" title="所有快捷键参考"></a>所有快捷键参考</h4><table>
<thead>
<tr>
<th align="center">标签</th>
<th align="left">MACOS</th>
<th align="right">Windows / Linux</th>
</tr>
</thead>
<tbody><tr>
<td align="center">打开新标签页</td>
<td align="left">⌘T</td>
<td align="right">Ctrl + T</td>
</tr>
<tr>
<td align="center">关闭标签</td>
<td align="left">⌘W</td>
<td align="right">Ctrl + W</td>
</tr>
<tr>
<td align="center">切换到下一个选项卡</td>
<td align="left">⇧⌘]</td>
<td align="right">Ctrl + Shift +]</td>
</tr>
<tr>
<td align="center">切换到上一个选项卡</td>
<td align="left">⇧⌘[</td>
<td align="right">Ctrl + Shift + [</td>
</tr>
<tr>
<td align="center">切换到位置的标签</td>
<td align="left">⌘1至⌘8</td>
<td align="right">Ctrl + 1到Ctrl + 8</td>
</tr>
<tr>
<td align="center">切换到最后一个选项卡</td>
<td align="left">⌘9</td>
<td align="right">Ctrl + 9</td>
</tr>
<tr>
<td align="center">从新栏中的侧栏打开请求</td>
<td align="left">⌥⌘（点击）</td>
<td align="right">Ctrl + Shift +（点击）</td>
</tr>
<tr>
<td align="center">请求</td>
<td align="left"></td>
<td align="right"></td>
</tr>
<tr>
<td align="center">请求URL</td>
<td align="left">⌘L</td>
<td align="right">Ctrl + L</td>
</tr>
<tr>
<td align="center">保存请求</td>
<td align="left">⌘S</td>
<td align="right">Ctrl + S</td>
</tr>
<tr>
<td align="center">保存请求为</td>
<td align="left">⇧⌘S</td>
<td align="right">Ctrl + Shift + S</td>
</tr>
<tr>
<td align="center">发送请求</td>
<td align="left">⌘↵</td>
<td align="right">Ctrl + Enter</td>
</tr>
<tr>
<td align="center">发送和下载请求</td>
<td align="left">⌥⌘↵</td>
<td align="right">Ctrl + Alt + Enter</td>
</tr>
<tr>
<td align="center">滚动到请求</td>
<td align="left">⌥⌘↑</td>
<td align="right">Ctrl + Alt +↑</td>
</tr>
<tr>
<td align="center">滚动到响应</td>
<td align="left">⌥⌘↓</td>
<td align="right">Ctrl + Alt +↓</td>
</tr>
<tr>
<td align="center">美化原始请求体</td>
<td align="left">⌘B</td>
<td align="right">Ctrl + B</td>
</tr>
<tr>
<td align="center">侧边栏</td>
<td align="left"></td>
<td align="right"></td>
</tr>
<tr>
<td align="center">搜索侧栏</td>
<td align="left">⌘F</td>
<td align="right">Ctrl + F</td>
</tr>
<tr>
<td align="center">切换边栏</td>
<td align="left">⌘\</td>
<td align="right">Ctrl + \</td>
</tr>
<tr>
<td align="center">下一个项目</td>
<td align="left">↓</td>
<td align="right">↓</td>
</tr>
<tr>
<td align="center">上一个项目</td>
<td align="left">↑</td>
<td align="right">↑</td>
</tr>
<tr>
<td align="center">展开项目</td>
<td align="left">→</td>
<td align="right">→</td>
</tr>
<tr>
<td align="center">折叠项目</td>
<td align="left">←</td>
<td align="right">←</td>
</tr>
<tr>
<td align="center">选择项目</td>
<td align="left">↵</td>
<td align="right">↵</td>
</tr>
<tr>
<td align="center">重命名项</td>
<td align="left">⌘E</td>
<td align="right">Ctrl + E</td>
</tr>
<tr>
<td align="center">组项目</td>
<td align="left">⌘G</td>
<td align="right">Ctrl + G</td>
</tr>
<tr>
<td align="center">切项目</td>
<td align="left">⌘X</td>
<td align="right">Ctrl + X</td>
</tr>
<tr>
<td align="center">复制</td>
<td align="left">⌘C</td>
<td align="right">Ctrl + C</td>
</tr>
<tr>
<td align="center">粘贴</td>
<td align="left">⌘V</td>
<td align="right">Ctrl + V</td>
</tr>
<tr>
<td align="center">重复</td>
<td align="left">⌘D</td>
<td align="right">Ctrl + D</td>
</tr>
<tr>
<td align="center">删除项目</td>
<td align="left">⌫</td>
<td align="right">Delete</td>
</tr>
<tr>
<td align="center">接口</td>
<td align="left"></td>
<td align="right"></td>
</tr>
<tr>
<td align="center">放大</td>
<td align="left">⌘+</td>
<td align="right">Ctrl + +</td>
</tr>
<tr>
<td align="center">缩小</td>
<td align="left">⌘ -</td>
<td align="right">Ctrl + -</td>
</tr>
<tr>
<td align="center">重置缩放</td>
<td align="left">⌘0</td>
<td align="right">Ctrl + 0</td>
</tr>
<tr>
<td align="center">切换双面视图</td>
<td align="left">⌥⌘V</td>
<td align="right">Ctrl + Alt + V</td>
</tr>
<tr>
<td align="center">切换到边栏</td>
<td align="left">⌥⌘1</td>
<td align="right">Ctrl + Alt + 1</td>
</tr>
<tr>
<td align="center">切换到生成器</td>
<td align="left">⌥⌘2</td>
<td align="right">Ctrl + Alt + 2</td>
</tr>
<tr>
<td align="center">窗口</td>
<td align="left"></td>
<td align="right"></td>
</tr>
<tr>
<td align="center">新请求窗口</td>
<td align="left">⌘N</td>
<td align="right">Ctrl + N</td>
</tr>
<tr>
<td align="center">新的运行窗口</td>
<td align="left">⇧⌘N</td>
<td align="right">Ctrl + Shift + N</td>
</tr>
<tr>
<td align="center">新的控制台窗口</td>
<td align="left">⌥⌘C</td>
<td align="right">Ctrl + Alt + C</td>
</tr>
<tr>
<td align="center">导入</td>
<td align="left">⌘O</td>
<td align="right">Ctrl + O</td>
</tr>
<tr>
<td align="center">管理环境</td>
<td align="left">⌥⌘E</td>
<td align="right">Ctrl + Alt + E</td>
</tr>
<tr>
<td align="center">设置</td>
<td align="left">⌘，</td>
<td align="right">Ctrl +，</td>
</tr>
<tr>
<td align="center">提交</td>
<td align="left">⌘↵</td>
<td align="right">Ctrl + Enter</td>
</tr>
<tr>
<td align="center">打开快捷键帮助</td>
<td align="left">⌘/</td>
<td align="right">Ctrl + /</td>
</tr>
</tbody></table>
<h4 id="数据编辑器"><a href="#数据编辑器" class="headerlink" title="数据编辑器"></a>数据编辑器</h4><blockquote>
<p>使用大量数据可能是麻烦和耗时的。Postman的数据编辑器可让您以快速，有效和优雅的方式查看和操作数据。</p>
</blockquote>
<blockquote>
<p>电子表格功能对于大多数使用数据的人来说都是熟悉的，所以我们将它们用作数据编辑器设计的灵感。</p>
</blockquote>
<h4 id="视觉布局"><a href="#视觉布局" class="headerlink" title="视觉布局"></a>视觉布局</h4><blockquote>
<p>我们已经更有效地配置了可用的水平和垂直空间，以优化可以显示的数据。</p>
</blockquote>
<blockquote>
<p>悬停的特定行将显示相关功能。这样可以减少界面中的混乱，并帮助用户将重点放在最相关的数据上。<br><img src="/hugo_blog/52908-ea3928d1273bfb17.webp" alt=""></p>
</blockquote>
<h4 id="只需拖动鼠标即可选择多行"><a href="#只需拖动鼠标即可选择多行" class="headerlink" title="只需拖动鼠标即可选择多行"></a>只需拖动鼠标即可选择多行</h4><p><img src="/hugo_blog/52908-93c194a2edf23c82.webp" alt=""></p>
<h4 id="数据编辑器的键盘快捷键"><a href="#数据编辑器的键盘快捷键" class="headerlink" title="数据编辑器的键盘快捷键"></a>数据编辑器的键盘快捷键</h4><table>
<thead>
<tr>
<th align="center">数据编辑器</th>
<th align="left">MACOS</th>
<th align="right">Windows / Linux快捷方式</th>
</tr>
</thead>
<tbody><tr>
<td align="center">导航</td>
<td align="left">箭头键（↑，→，↓，←）+tab</td>
<td align="right">箭头键（↑，→，↓，←）+tab</td>
</tr>
<tr>
<td align="center">重复行</td>
<td align="left">⌘D</td>
<td align="right">Ctrl + D</td>
</tr>
<tr>
<td align="center">选择特定行</td>
<td align="left">⌘（点击）</td>
<td align="right">Ctrl +（点击）</td>
</tr>
<tr>
<td align="center">选择上一行</td>
<td align="left">⇧↑</td>
<td align="right">Shift +↑</td>
</tr>
<tr>
<td align="center">选择下一行</td>
<td align="left">⇧↓</td>
<td align="right">Shift +↓</td>
</tr>
<tr>
<td align="center">选择当前行</td>
<td align="left">⇧→</td>
<td align="right">Shift +→</td>
</tr>
<tr>
<td align="center">移动行</td>
<td align="left">⌘⇧↑</td>
<td align="right">Ctrl + Shift +↑</td>
</tr>
<tr>
<td align="center">移动行（s）</td>
<td align="left">⌘⇧↓</td>
<td align="right">Ctrl + Shift +↓</td>
</tr>
<tr>
<td align="center">复制 - 可以多重选择和复制行</td>
<td align="left">⌘C</td>
<td align="right">Ctrl + C</td>
</tr>
<tr>
<td align="center">剪切 - 可以多重选择和切割行</td>
<td align="left">⌘X</td>
<td align="right">Ctrl + X</td>
</tr>
<tr>
<td align="center">粘贴</td>
<td align="left">⌘V</td>
<td align="right">Ctrl + V</td>
</tr>
<tr>
<td align="center">删除 - 可以多重选择和删除行</td>
<td align="left">⌫</td>
<td align="right">Delete</td>
</tr>
<tr>
<td align="center">取消选择行</td>
<td align="left">⎋</td>
<td align="right">ESC</td>
</tr>
<tr>
<td align="center"><img src="/hugo_blog/52908-fa6c6dfc9bce1fa6.webp" alt=""></td>
<td align="left"></td>
<td align="right"></td>
</tr>
</tbody></table>
<h4 id="支持批量操作"><a href="#支持批量操作" class="headerlink" title="支持批量操作"></a>支持批量操作</h4><blockquote>
<p>您可以选择并复制多行。然后继续粘贴在不同的地方（例如params），看看自己会发生什么！</p>
</blockquote>
<p><img src="/hugo_blog/59162757.gif" alt=""></p>
<h4 id="查看前面的信息"><a href="#查看前面的信息" class="headerlink" title="查看前面的信息"></a>查看前面的信息</h4><blockquote>
<p>我们希望显示您想要查看的信息。如果导航到具有大量数据的地方，UI元素将自动展开以显示完整的信息。这是在数据编辑器以及URL栏中实现的。</p>
</blockquote>
<p><img src="/hugo_blog/52908-92d8b0c87b22935b.webp" alt=""></p>
<h4 id="调整列大小的能力"><a href="#调整列大小的能力" class="headerlink" title="调整列大小的能力"></a>调整列大小的能力</h4><blockquote>
<p>您可以通过拖动“键”列标题右侧的边界来更改键和值列的宽度。</p>
</blockquote>
<p><img src="/hugo_blog/52908-e5aa28367de06758.webp" alt=""></p>
<h4 id="多线支持"><a href="#多线支持" class="headerlink" title="多线支持"></a>多线支持</h4><blockquote>
<p>数据编辑器支持发送多行值。在“键”或“值”字段中按“Enter”可以扩展它，并将光标移动到新行。</p>
</blockquote>
<p><img src="/hugo_blog/52908-4b84a02c2cc042ba.webp" alt=""></p>
<p>转载文章</p>
<p>作者：千夜<br>链接：<a href="https://www.jianshu.com/p/9dbaaa9d9e35" target="_blank" rel="noopener">https://www.jianshu.com/p/9dbaaa9d9e35</a><br>来源：简书<br>著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/23/day05/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/21/biaoge/">
                        表格
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-20T21:40:46.000Z">
                            2020-04-21
                        </time>
                    
                    
                </div>
                
                    <table>
<thead>
<tr>
<th align="center">name</th>
<th align="left">age</th>
<th align="right">sex</th>
</tr>
</thead>
<tbody><tr>
<td align="center">evin</td>
<td align="left">288</td>
<td align="right">男</td>
</tr>
</tbody></table>
<hr>
<table>
<thead>
<tr>
<th align="center">name</th>
<th align="left">age</th>
<th align="right">sex</th>
</tr>
</thead>
<tbody><tr>
<td align="center">evin</td>
<td align="left">288</td>
<td align="right">男</td>
</tr>
</tbody></table>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/21/biaoge/">
                        Read More
                    </a>
                </div>
            </div>
        
            <div class="post-item">
                <h1>
                    <a href="/hexo_blog/2020/04/21/day04/">
                        Django启动
                    </a>
                </h1>
                <div class="create">
                    <span>Created</span>
                    
                        <time datetime="2020-04-20T21:40:46.000Z">
                            2020-04-21
                        </time>
                    
                    
                </div>
                
                    <h1 id="将项目所需的依赖导入-txt中"><a href="#将项目所需的依赖导入-txt中" class="headerlink" title="将项目所需的依赖导入.txt中"></a>将项目所需的依赖导入.txt中</h1><h5 id="pip-freeze-gt-requirements-txt"><a href="#pip-freeze-gt-requirements-txt" class="headerlink" title="pip freeze &gt; requirements.txt"></a>pip freeze &gt; requirements.txt</h5><hr>
<h1 id="将项目requirements-txt文件中项目的依赖安装好"><a href="#将项目requirements-txt文件中项目的依赖安装好" class="headerlink" title="将项目requirements.txt文件中项目的依赖安装好"></a>将项目requirements.txt文件中项目的依赖安装好</h1><h5 id="pip-install-i-https-pypi-tuna-tsinghua-edu-cn-simple-r-requirements-txt"><a href="#pip-install-i-https-pypi-tuna-tsinghua-edu-cn-simple-r-requirements-txt" class="headerlink" title="pip install -i https://pypi.tuna.tsinghua.edu.cn/simple -r requirements.txt"></a>pip install -i <a href="https://pypi.tuna.tsinghua.edu.cn/simple" target="_blank" rel="noopener">https://pypi.tuna.tsinghua.edu.cn/simple</a> -r requirements.txt</h5><hr>
<h1 id="数据库迁移"><a href="#数据库迁移" class="headerlink" title="数据库迁移"></a>数据库迁移</h1><h5 id="python-manage-py-makemigrations"><a href="#python-manage-py-makemigrations" class="headerlink" title="python manage.py makemigrations"></a>python manage.py makemigrations</h5><h5 id="python-manage-py-migrate"><a href="#python-manage-py-migrate" class="headerlink" title="python manage.py migrate"></a>python manage.py migrate</h5><h1 id="Django启动命令"><a href="#Django启动命令" class="headerlink" title="Django启动命令"></a>Django启动命令</h1><h5 id="python-manage-py-runserver"><a href="#python-manage-py-runserver" class="headerlink" title="python manage.py runserver"></a>python manage.py runserver</h5><p><img src="/hugo_blog/c771720dbd691b331bcad9a158f499aa.jpg" alt="每日一图"></p>

                
                <div class="readmore">
                    <a href="/hexo_blog/2020/04/21/day04/">
                        Read More
                    </a>
                </div>
            </div>
        
    </div>


    <div id="content-aside">
    <div class="content-aside-owner">
        <div id="owner">
    <div class="avatar-bg">
        <div class="index-page">
            <div class="banner">
                <div class="slide slide1">
                    <div class="bg-wrapper">
                        <div class="bg" id="container_left">
                            <div id="canvas_left"></div>
                        </div>
                    </div>
                </div>
                <div class="slide slide2">
                    <div class="bg-wrapper">
                        <div class="bg" id="container_right">
                            <div id="canvas_right"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="/"><img class="avatar" src="/images/touxiang.jpg" alt=""></a>
    <a href="/"><h3 class="author">Mr.Song</h3></a>
    <h4></h4>
    <div class="social">
        
            
              <a href="https://github.com/markyong" title="github" class="fa fa-github" target="_blank"></a>
            
        
            
              <a href="#" title="weibo" class="fa fa-weibo" target="_blank"></a>
            
        
    </div>
</div>
    </div>
    
        <div class="content-aside-about">
            <h2>
                <a href="/about">About</a>
            </h2>
        </div>
    
    <div class="content-aside-tags">
        <h2>
            <a href="/tags">
                Tags
                <sup style="font-size: 12px">
                    [4]
                </sup>
            </a>
        </h2>
    </div>
    
<aside id="categories">
    <h2>Categories</h2>
    
        <p>None.</p>
    
</aside>

    
<aside id="acchives">
    <h2>Archives</h2>
    
    <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/hexo_blog/archives/2020/05/">May 2020</a></li><li class="archive-list-item"><a class="archive-list-link" href="/hexo_blog/archives/2020/04/">April 2020</a></li></ul>
    
</aside>

</div>

</div>
<nav id="pagination" class="clearfix">
    <span class="page-number current">1</span><a class="page-number" href="/hexo_blog/page/2/">2</a><a class="extend next" rel="next" href="/hexo_blog/page/2/">Next &amp;raquo;</a>
</nav>

    </div>
</div>
<footer id="footer">
    <div id="copyright">&copy; Mr.Song  2020</div>
    <div id="theme">
        Powered by <a href="http://hexo.io" target="_blank" rel="noopener">Hexo</a>. Theme by <a href="https://github.com/markyong/hexo-theme-stage" target="_blank" rel="noopener">Stage</a>
    </div>
</footer>
<script src="/lib/js/waterrippleeffect.min.js"></script>
<script src="/js/header-bg.main.js"></script>

    <script src="/lib/js/cav.js"></script>
    <script src="/js/avatar-bg.main.js"></script>

</body>
</html>
